<template>
  <div class="detial">
      <div>
          <img :src="obj.pic" alt="">
      </div>
      <ul>
          <li class="name">{{obj.name}}</li>
          <li class="gray">{{obj.characteristic}}</li>
          <li class="red">￥{{obj.minPrice}}</li>
      </ul>
 </div>
</template>

<script>
export default {
  name: 'detial',
  props:{
      obj:{
          type:Object
      }
  },
  data() { 
    return {

    }
  },
  created() {

  },
  methods:{

  },
 }
</script>

<style lang="scss" scoped>
.detial{
    width: 50%;
    height: 5.42rem;
    flex-wrap: 2;
    padding:0 0.1rem;
    div{
        width: 100%;
        height: 4.12rem;
        img{
            width: 100%;
            height: 100%;
        }
    }
    ul{
        width: 100%;
        height: calc( 5.42rem - 4.12rem ) ; 
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        font-size: 0.26rem;
        li{
         overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        }
    }
}
.name{
    font-size: 0.30rem;
}

</style>